<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        var xData = []; //X轴数据
        var yData = []; //Y轴数据
        //循环赋值
        for (let i in this.data) {
          xData.push(this.data[i].name);
          yData.push(this.data[i].value);
        }
        let option = {
          // // backgroundColor: "#00265f",
          // title: {
          //   text: "政策补贴额度",
          //   x: "center",
          //   y: "4%",
          //   textStyle: {
          //     color: "rgba(4, 162, 253,1)",
          //     fontSize: "22",
          //   },
          //   subtextStyle: {
          //     color: "#90979c",
          //     fontSize: "16",
          //   },
          //   show: false,
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow", //默认为line，line直线，cross十字准星，shadow阴影
              crossStyle: {
                color: "none",
              },
            },
          },
          grid: {
            top: "15%",
            right: "7%",
            left: "8%",
            bottom: "12%",
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisLine: {
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
              axisLabel: {
                margin: 10,
                color: this.json.theme.echartsBackgroundColor[0],
                textStyle: {
                  fontSize: 12,
                },
              },
            },
          ],
          yAxis: [
            {
              // name: "单位：万元",
              axisLabel: {
                formatter: "{value}",
                color: this.json.theme.echartsBackgroundColor[0],
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: this.json.theme.echartsBackgroundColor[0],
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "rgba(255,255,255,0.12)",
                },
              },
            },
          ],
          series: [
            {
              type: "bar",
              data: yData,
              barWidth: "16px" /* 柱宽 */,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: this.json.theme.echartsBackgroundColor[0],
                      },
                      {
                        offset: 1,
                        color: this.json.theme.echartsBackgroundColor[1],
                      },
                    ],
                    false
                  ), // 渐变
                  barBorderRadius: [5, 5, 5, 5] /* 柱子圆角 */,
                  shadowColor: "rgba(0,160,221,0)" /* 柱子边框 */,
                  shadowBlur: 4,
                },
              },
              label: {
                /* 顶部显示具体数字 */
                normal: {
                  show: false,
                  lineHeight: 30,
                  width: 80,
                  height: 30,
                  backgroundColor: "rgba(0,160,221,0.1)",
                  borderRadius: 200,
                  position: ["-8", "-60"],
                  distance: 1,
                  formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                    ","
                  ),
                  rich: {
                    d: {
                      color: "#3CDDCF",
                    },
                    a: {
                      color: "#fff",
                      align: "center",
                    },
                    b: {
                      width: 1,
                      height: 30,
                      borderWidth: 1,
                      borderColor: "#234e6c",
                      align: "left",
                    },
                  },
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
